import {useDrag} from "react-dnd";
import { Checkbox} from "antd";
import FormItem from "antd/es/form/FormItem";
import {CommonComponentProps} from "../../../../components/editor/interface.ts";
import {CSSProperties} from "react";
import {MoveDrop} from "../../../hooks/useMoveDrop.tsx";

export interface CheckboxProps extends CommonComponentProps {
    id: number;
    name: string;
    styles?: CSSProperties;
    parentId: number;
    children?: any;
    label:string
    type: any
    options:any
}

const CheckboxDev = (props:CheckboxProps) => {
    const {id,name} = props
    const [_,drag] = useDrag({
        type: "Checkbox",
        item: {
            id:props.id,
            type: props.name,
            dragType: "move"
        },
    })
    return (
        <div ref={drag} style={props.styles} data-component-id={props.id}  className={'relative'} >
            <MoveDrop key={name} dropComponentId={id} parentId={props.parentId}  />
            <FormItem>
                <FormItem  label={props.label} name={props.name} rules={props.rule} style={{margin:"0",...props.styles}}>
                    <Checkbox.Group  options={props.options || []} />
                </FormItem>
            </FormItem>
        </div>
    );
};

export default CheckboxDev